<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
        <script src="js/bootstrap.min.js"/>
    </h:head>
    <h:body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">MeteoCal</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <h:form id="loginform" class="navbar-form navbar-right" role="form">
                        <h:panelGroup>
                            <div class="form-group">
                                <p:inputText type="text" placeholder="Email" class="form-control" id="username" value="#{loginBean.username}" required="true"/>
                            </div>
                            <div class="form-group">
                                <p:password id="pass" placeholder="Password" class="form-control" value="#{loginBean.password}" required="true" />
                            </div>
                            <p:commandButton id="submit" class="btn btn-sm btn-success" action="#{loginBean.login()}" value="Login" />
                            <p:growl id="errorMessage" showDetail="true" autoUpdate="true" />
                        </h:panelGroup>
                    </h:form>
                </div>
            </div>
        </nav>
        <div class="jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h1>MeteoCal</h1>
                        <p>Your agenda is always busy and you can not get organized in the best way? It's time to use MeteoCal! It's so easy to use that you can not do without. With MeteoCal you can organize events, invite friends and accept invitation to event from other users. No overlaps of events and no bad weather conditions for your outdoor events. What are you waiting for?</p>
                    </div>
                    <div class="col-md-6">
                        <h1>Sign In!</h1>
                        <p>Join other users and start to create and manage your events</p>
                        <div align="right"><p:link outcome="register" value="Sign In"/><br/></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h2><img src="img/openWeatherMap.png" style='vertical-align: bottom'/>OpenWeatherMap</h2>
                    <br/>
                    <p>We use weather forecasts provided by openweathermap to prevent your outdoor events are ruined by bad weather conditions.</p>
                    <p><a class="btn btn-default" href="http://openweathermap.org/" role="button">View details &raquo;</a></p>
                </div>
                <div class="col-md-4">
                    <h2><img src="img/primefaces.png" style='vertical-align: bottom'/></h2>
                    <br/>
                    <p>We use PrimeFaces to build our application.</p>
                    <p><a class="btn btn-default" href="http://www.primefaces.org/index" role="button">View details &raquo;</a></p>
                </div>
                <div class="col-md-4">
                    <h2><img src="img/google.png" style='vertical-align: bottom; left: auto; right: auto'/></h2>
                    <br/>
                    <p>We use the Google Place Autocomplete service by Google in order to returns place predictions as a user types.</p>
                    <p><a class="btn btn-default" href="https://developers.google.com/places/documentation/autocomplete" role="button">View details &raquo;</a></p>
                </div>
            </div>
            <hr/>
            <footer>
                <center><p>&copy; Daniele Marangoni - Matteo Montalcini - Daniele Moro 2014</p></center>
            </footer>
        </div>
    </h:body>
</html>

